<!-- 1、分数列加粗，鼠标悬浮时显示点击样式,点击后单元格内数字加1
2、Add按钮点击新增一列数据，分数字段的值为点击的那列的分数值+1
3、Delete按钮，点击后弹出删除提示框，点击Ok删除当前列，点击Cancel取消操作

实现上述需求，vue3+element plus -->

<template>
    <div style="padding: 20px;">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="studentId" label="学号" width="160" />

            <!-- 分数列 -->
            <el-table-column label="分数" width="120">
                <template #default="scope">
                    <span class="score-cell" @click="increaseScore(scope.$index)">
                        {{ scope.row.score }}
                    </span>
                </template>
            </el-table-column>

            <!-- 操作列 -->
            <el-table-column label="操作" width="220">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="addRow(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>Add
                    </el-button>
                    <el-button type="danger" size="small" @click="confirmDelete(scope.$index)">
                        <el-icon>
                            <Delete />
                        </el-icon>Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 删除确认框 -->
        <el-dialog title="删除确认" v-model="deleteDialogVisible" width="300px" center>
            <span>确定要删除这条数据吗？</span>
            <template #footer>
                <el-button @click="deleteDialogVisible = false">Cancel</el-button>
                <el-button type="danger" @click="deleteRow">OK</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'

// 初始表格数据
const tableData = ref([
    { name: 'A', studentId: 'A1001', score: 1007 },
    { name: 'B', studentId: 'B1002', score: 1001 },
    { name: 'C', studentId: 'C1003', score: 1002 },
    { name: 'D', studentId: 'D1004', score: 1007 },
])

// 分数加 1
const increaseScore = (index) => {
    tableData.value[index].score++
    ElMessage.success('分数 +1')
}

// 点击 Add 新增一行（分数 +1）
const addRow = (row) => {
    const newRow = {
        name: row.name,
        studentId: row.studentId,
        score: row.score + 1,
    }
    tableData.value.push(newRow)
    ElMessage.success('新增成功')
}

// 删除相关状态
const deleteDialogVisible = ref(false)
let deleteIndex = null

// 点击 Delete 弹出确认框
const confirmDelete = (index) => {
    deleteIndex = index
    deleteDialogVisible.value = true
}

// 确认删除
const deleteRow = () => {
    tableData.value.splice(deleteIndex, 1)
    deleteDialogVisible.value = false
    ElMessage.success('删除成功')
}
</script>

<style scoped>
.score-cell {
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.score-cell:hover {
    color: #409eff;
}
</style>
